<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- START SIGMA IMPORTS -->
    <script src="sigma.js/sigma.js-1.2.1/src/sigma.core.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/conrad.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/utils/sigma.utils.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/utils/sigma.polyfills.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/sigma.settings.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.dispatcher.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.configurable.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.graph.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.camera.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.quad.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/classes/sigma.classes.edgequad.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/captors/sigma.captors.mouse.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/captors/sigma.captors.touch.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/sigma.renderers.canvas.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/sigma.renderers.webgl.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/sigma.renderers.svg.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/sigma.renderers.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.utils.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.nodes.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.edges.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.edges.curve.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.labels.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/renderers/svg/sigma.svg.hovers.def.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/middlewares/sigma.middlewares.rescale.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/middlewares/sigma.middlewares.copy.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/misc/sigma.misc.animation.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/misc/sigma.misc.bindEvents.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/misc/sigma.misc.bindDOMEvents.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/src/misc/sigma.misc.drawHovers.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.parsers.gexf/sigma.parsers.gexf.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.parsers.gexf/gexf-parser.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.parsers.json/sigma.parsers.json.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.plugins.filter/sigma.plugins.filter.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
    <!-- END SIGMA IMPORTS -->
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/plugins/sigma.layout.forceAtlas2/worker.js"></script>
    <script src="sigma.js/sigma.js-1.2.1/examples/lib/jquery-2.1.1.min.js"></script>
    <script src="bfs.js"></script>
</head>

<div id="container">
    <style>
        body {
            margin: 0;
        }

        #graph-container {
            top: 0%;
            bottom: 0%;
            left: 0px;
            right: 0px;
            position: absolute;
            background: #1d1d1d;
        }
    </style>
    <div>Scroll down to see the graph</div>
    <div id="graph-container"></div>
</div>
<div>
    <style>
        #blank {
            position: fixed;
            top: 29.5px;
            left: 10px;
            height: 55px;
            width: 330px;
            background: white;
            /*background: -webkit-gradient(linear, left top, left bottom, from(#a99fc6), color-stop(70%, #9c9694));*/
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.68);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            background-color: rgba(252, 255, 253, 0.1);
            /*-webkit-box-shadow: 0 1px 2px rgba(255, 179, 115, 0.87);
            -moz-box-shadow: 0 1px 2px rgba(255, 99, 102, 0.58);
            box-shadow: 3px 3px 10px rgb(246, 255, 254);*/
        }

        #text-content {
            color: white;
            border: 0px;
        }

        #Search {
            position: fixed;
            left: 280px;
            top: 35px;
            cursor: pointer;
            background-color: rgba(252, 255, 253, 0.1);
            border: 0px;
        }

        #Route {
            position: fixed;
            left: 220px;
            top: 35px;
            cursor: pointer;
            background-color: rgba(252, 255, 253, 0.1);
            color: white;
            border: 0px;
        }

        #path {
            position: fixed;
            top: 29.5px;
            left: 10px;
            height: 55px;
            width: 330px;
            background: white;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.68);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;

            background-color: rgba(252, 255, 253, 0.1);
            display: none;
        }

        #source {
            position: relative;
            top: 10px;
            width: 90px;
            height: 35px;
            font-family: "Source Code Pro Semibold";
            border: 0px;
            background-color: rgba(252, 255, 253, 0.1);
            color: white;
        }

        #target {
            position: relative;
            top: 10px;
            width: 90px;
            height: 35px;
            font-family: "Source Code Pro Semibold";
            border: 0px;
            background-color: rgba(252, 255, 253, 0.1);
            color: white;
        }

        #go-button {
            position: fixed;
            left: 280px;
            top: 35px;
            cursor: pointer;
            background-color: rgba(252, 255, 253, 0.1);
            border: 0px;
        }

        #re-button {
            position: fixed;
            left: 220px;
            top: 35px;
            cursor: pointer;
            background-color: rgba(252, 255, 253, 0.1);
            border: 0px;
        }

        #showNodes {
            position: fixed;
            top: 100px;
            left: 10px;
            height: 620px;
            width: 330px;
            /*background-color: rgba(192, 237, 255, 0);*/
            /*background: -webkit-gradient(linear, left top, left bottom, from(#a99fc6), color-stop(70%, #9c9694));*/
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.68);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            /*-webkit-box-shadow: 0 1px 2px rgba(255, 179, 115, 0.87);
            -moz-box-shadow: 0 1px 2px rgba(255, 99, 102, 0.58);
            box-shadow: 3px 3px 10px rgb(246, 255, 254);*/
            overflow-y: scroll;
            background-color: rgba(252, 255, 253, 0.1);
            display: none;
        }

        .showNodes::-webkit-scrollbar {
            height: 10px;
            width: 10px;
            background-color: rgba(252, 255, 253, 0.1);
        }

        .showNodes::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 8px rgba(16, 19, 21, 0.88);
            background-color: rgba(30, 37, 30, 0.1);
        }

        .showNodes::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(252, 255, 253, 0.1);
            border-radius: 10px;
            background-color: rgba(252, 255, 253, 0.1);
        }

        #showMenu {
            left: 20px;
            height: 60px;
            width: 280px;
            background-color: rgba(252, 255, 253, 0);
        }

        #showMenuBlank {
            position: fixed;
            height: 60px;
            width: 320px;
            background-color: rgba(252, 255, 253, 0);
        }

        #showMenu a:hover {
            color: lightcyan;
        }

        #showMenuFunction {
            position: fixed;
            left: 35px;
            height: 40px;
            width: 270px;
            top: 110px;
            background-color: rgba(252, 255, 253, 0);
        }

        #nearby {
            font-size: large;
            height: 50px;
            color: rgb(76, 136, 125);
        }

        #showNeighborNodes {
            /*color: #000000;*/
            color: rgb(139, 255, 233);
        }

        .form-control {
            position: fixed;
            top: 35px;
            height: 45px;
            left: 12px;
            background-color: rgba(252, 255, 253, 0.05);
        }

        #func {
            background-color: rgba(252, 255, 253, 0.05);
            height:30px;
            width:62px;
        }

    </style>

    <div id="blank"></div>
    <div id="text">
        <div>
            <form class="form-inline" role="form">
                <div class="form-group">
                    <label class="sr-only" for="search">Search</label>
                    <input type="text" class="form-control" id="text-content" placeholder="Enter knowledge">

                </div>
            </form>
        </div>
    </div>
    <div>
        <button id="Search" class="btn btn-primary btn-lg">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <button id="Route" onclick="routeBlankShow()" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-share-alt"></span>
        </button>
    </div>
    <div id="path">
        <div>
            <form class="form-inline" role="form">
                <div class="form-group">
                    <input type="search" class="form-control" id="source" placeholder="Source">
                    <input type="search" class="form-control" id="target" placeholder="Target">
                    <button id="re-button" class="btn btn-default btn-lg" type="button" onclick="routeBlankShow()">
                        <sapn class="glyphicon glyphicon-refresh"></sapn>
                    </button>
                    <input type="button" id="go-button" class="btn btn-primary btn-lg" value="go">
                </div>
            </form>
        </div>
    </div>
    <div id="showNodes" class="showNodes">
        <div id="showMenuBlank">
            <div id="showMenuFunction">
                <div class="btn btn-default btn-lg" id="func" style="font-size: 10px">
                    <a href="#">
                        <span class="glyphicon glyphicon-user">课堂</span>
                    </a>
                </div>
                <div class="btn btn-default btn-lg" id="func" style="font-size: 10px">
                    <a href="#">
                        <span class="glyphicon glyphicon-wrench">实验</span>
                    </a>
                </div>
                <div class="btn btn-default btn-lg" id="func" style="font-size: 10px">
                    <a href="#">
                        <span class="glyphicon glyphicon-pencil">测试</span>
                    </a>
                </div>
                <div class="btn btn-default btn-lg" id="func" style="font-size: 10px">
                    <a href="#">
                        <span class="glyphicon glyphicon-book">总结</span>
                    </a>
                </div>
            </div>
        </div>

        <div id="showMenu"></div>
        <div id="nearby">
            <span class="glyphicon glyphicon-map-marker">路径:</span>
        </div>
        <ul id="showNeighborNodes"></ul>
    </div>
</div>
<div id="cammera">
    <style>
        #cammera {
            position: fixed;
            top:580px;
            left: 1350px;
            height: 150px;
            width: 150px;
            background: #fcffff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            cursor: pointer;
        }
    </style>
</div>

<script>
    function routeBlankShow() {
        let r = document.getElementById("path");
        let w = document.getElementById("blank");
        let e = document.getElementById("text-content");
        let s = document.getElementById("Search");
        let t = document.getElementById("Route");
        if (r.style.display === 'none' || !r.style.display){
            r.style.display = 'block';
            w.style.display = 'none';
            e.style.display = 'none';
            s.style.display = 'none';
            t.style.display = 'none';
        }

        else{
            r.style.display = 'none';
            w.style.display = 'block';
            e.style.display = 'block';
            s.style.display = 'block';
            t.style.display = 'block';
        }

    }
</script>

<script>
    // ------------------------
    let list,               //邻接点
        input,              //搜索框
        floatBox,           //浮动框
        searchButton,       //搜索按钮
        nodes,
        edges,
        pathSource,         //出发点
        pathTarget,         //目的地
        go,                 //搜索路径按钮
        ss
    // ------------------------

    sigma.classes.graph.addMethod('searchLabel', function (nodeId) {
        input.val(nodeId);
    });

    sigma.classes.graph.addMethod('showNodesLabel', function (nodeId) {
        $(`<li>${nodeId}</li>`).appendTo(list);
        floatBox.css('display', 'block');
    });

    sigma.classes.graph.addMethod('clearNodesLabel', function () {
        list.children().remove();
    });

    sigma.classes.graph.addMethod('search', function () {
        return document.getElementById("text-content").value;
    });

    sigma.classes.graph.addMethod('neighbors', function (nodeId) {
        let k,
            neighbors = {},
            index = this.allNeighborsIndex[nodeId] || {};

        for (k in index)
            neighbors[k] = this.nodesIndex[k];

        return neighbors;
    });

    window.onload = sigma.parsers.gexf(
        'map_using_Fruchterman_reingold_and_Yifan_Hu.gexf',{
            //container:document.getElementById('graph-container'),
            type:'canvas',
            settings:{
                labelColor: 'node',
                defaultHoverLabelBGColor: '#ff3822',
                labelHoverShadowColor: "#ffecda",
                defaultLabelHoverColor: 'white',
                defaultEdgeType:'curve',
                defaultEdgeHoverColor:'#fff'
            }
        },
        function (s) {
            function searchHandler() {
                let nodeId = input.val();
                let toKeep = s.graph.neighbors(nodeId);
                let node = s.graph.nodes().find(value => value.id === nodeId);
                if (!node) {              //试图搜索不存在的点时直接返回
                    return;
                }
                toKeep[nodeId] = node;
                s.graph.clearNodesLabel();
                for ([key, value] of Object.entries(toKeep)) {
                    s.graph.showNodesLabel(value.id);
                }

                s.graph.nodes().forEach(function (n) {
                    if (toKeep[n.id])
                        n.color = n.originalColor;
                    else
                        n.color = '#383838';
                });

                s.graph.edges().forEach(function (e) {
                    if (toKeep[e.source] && toKeep[e.target])
                        e.color = e.originalColor;
                    else
                        e.color = '#383838';
                });

                s.refresh();
            }
            ss = s;
             let graph = {nodes:[],edges:[]};
             graph.edges = s.graph.edges().map(e=>Object.assign(e,{type:'curve'}));
             graph.nodes = s.graph.nodes();

             s = new sigma({
                 graph:graph,
                 renderer:{
                     container:document.getElementById('graph-container'),
                     type:'canvas'
                 },
                 settings:{
                     enableHovering: 'true',
                     labelHoverShadowColor: "#ffecda",
                     drawLabels: 'true',
                     drawEdges: 'true',
                     labelSize: 'fixed',
                     defaultHoverLabelBGColor: '#ff3822',
                     labelColor: 'node',
                     defaultLabelHoverColor: 'white',
                     defaultEdgeHoverColor: '#000',
                     //defaultEdgeType: "curve",
                     edgeLabelSize: 'proportional',
                     minNodeSize: 0.0001,
                     maxNodeSize: 12,
                     minEdgeSize: 0.05,
                     maxEdgeSize: 0.2,

                     //enableEdgeHovering: true,
                     edgeHoverSizeRatio:5,
                     zoomingRatio:1.5,
                     labelSizeRatio:10,
                     labelThreshold: 5.5

                 }
             });


            list = $('#showNeighborNodes');
            input = $('#text-content');
            floatBox = $('#showNodes');
            searchButton = $('#Search');
            searchButton.click(searchHandler);
            input.keydown(enterHandler(searchHandler));


            pathSource = $('#source');
            pathTarget = $('#target');
            pathSource.keydown(enterHandler(routePlanning));
            pathTarget.keydown(enterHandler(routePlanning));
            go = $('#go-button');
            go.click(routePlanning);

            nodes = s.graph.nodes().map(node => node.id);
            edges = s.graph.edges().map(edge => ({ source: edge.source, target: edge.target }));

            function routePlanning() {
                var path = searchPath(pathSource.val(), pathTarget.val());
                if (!path) {
                    return;
                }
                s.graph.clearNodesLabel();
                for ([key, value] of Object.entries(path)) {
                    s.graph.showNodesLabel(value);
                }

                s.graph.nodes().forEach(function (n) {
                    n.color = '#383838';
                });

                s.graph.edges().forEach(function (e) {
                    e.color = '#383838';
                });

                for ([key, value] of Object.entries(path)) {
                    let node = s.graph.nodes().find(node => node.id === value);
                    node.color = '#ff0801';
                }

                let edgesToShow = [];
                for (let i = 0; i < path.length - 1; i++) {
                    let edge = s.graph.edges().find(edge => (edge.source === path[i]) && (edge.target === path[i + 1]));
                    if (!edge) {
                        edge = s.graph.edges().find(edge => (edge.target === path[i]) && (edge.source === path[i + 1]));
                    }
                    if (edge) {
                        edgesToShow.push(edge);
                    } else {
                        console.log('error:' + path[i] + path[i + 1]);
                    }
                }
               // console.log(edgesToShow);
                for (let i = 0; i < edgesToShow.length; i++) {
                    edgesToShow[i].color = '#ff693a';
                    console.log(edgesToShow[i]);
                    //edgesToShow[i].renderer1 = 10;
                    //edgesToShow[i].read_cam0.size = 1;
                }

                s.refresh();
            }

            s.graph.nodes().forEach(function (n) {
                n.originalColor = n.color;
            });
            s.graph.edges().forEach(function (e) {
                e.originalColor = e.color;
            });

            s.bind('overNode', function (e) {
                let nodeId = e.data.node.id, toKeep = s.graph.neighbors(nodeId);
                toKeep[nodeId] = e.data.node;

                s.graph.nodes().forEach(function (n) {
                    if (toKeep[n.id])
                        n.color = n.originalColor;
                    else
                        n.color = '#383838';
                });

                s.graph.edges().forEach(function (e) {
                    if (toKeep[e.source] && toKeep[e.target])
                        e.color = e.originalColor;
                    else
                        e.color = '#383838';
                });

                s.refresh();
            });

            s.bind('outNode', function (e) {
                s.graph.nodes().forEach(function (n) {
                    n.color = n.originalColor;
                });

                s.graph.edges().forEach(function (e) {
                    e.color = e.originalColor;
                });

                s.refresh();
            });

            s.bind('clickNode', function (e) {
                //if(!s.graph.search()){
                let nodeId = e.data.node.id;
                s.graph.searchLabel(nodeId);
                let toKeep = s.graph.neighbors(nodeId);
                toKeep[nodeId] = e.data.node;

                s.graph.clearNodesLabel();

                for ([key, value] of Object.entries(toKeep)) {
                    s.graph.showNodesLabel(value.id);
                }

                s.refresh();
            });

            /*s.bind('clickStage', function (e) {
                s.graph.nodes().forEach(function (n) {
                    n.color = n.originalColor;
                });

                s.graph.edges().forEach(function (e) {
                    e.color = e.originalColor;
                });

                s.refresh();
            });*/

            s.addRenderer({
                container: document.getElementById("cammera"),
                camera: 'cam1',
                /* rest of settings */
                settings: {

                }
            });

            /*s.addRenderer({
                container: document.getElementById("graph-container"),
                camera: 'cam2',

                settings: {

                }
            });*/

            s.refresh();
        }
    );

    function enterHandler(cb){
        return (e)=>{
            if(e.keyCode === 13){
                cb();
                return false;
            }
        }
    }

</script>

</html>